<template>
	<view class="main">
		<view class="topzhanwei"></view>
		<view class="navigator">
			<uni-icons type="left" size="30" color="#333" @click="back"></uni-icons>
			<view class="title">{{type=='order'?'订单消息':type=='system'?'系统通知':type=='service'?'服务通知':'其他消息'}}</view>
			<view class="right"></view>
		</view>
		<scroll-view class="list" scroll-y  @scrolltolower="getList">
			<view class="list-content">
				<view class="empty" v-if="list.length == 0">
					
					<image src="https://admin.cqycgyl.com/uploads/20250919/06fef2c8c887ae4fa5e8300736e6bb44.png" class="empty-img"></image>
					<text class="empty-text">暂无消息</text>
				</view>
				<view :id="item.id" class="list-item" @click="handleClick(item)" v-if="type=='order'" v-for="(item,index) in list" :key="index">
					<view class="read" v-if="!item.read"></view>
					<view class="order-header">
						<image class="topIcon" src="https://admin.cqycgyl.com/uploads/20250917/86656cf31b3f40061ecf022eea89fbee.png"></image>
						<text class="text">云仓优送</text>
						<text class="time">{{item.time}}</text>
					</view>
					<view class="order-content">
						<view class="view">
						  {{item.msg}}
						</view>
						<image src="" class="right"></image>
					</view>
				</view>
				<view :id="item.id" class="service" v-if="type=='service'"  @click="handleClick(item)" v-for="(item,index) in list" :key="index">
					<view class="read" v-if="!item.read"></view>
					<view class="service-header">
						<view class="left-title">
							购物券消息
						</view>
						<view class="right-date">
							{{item.time}}
						</view>
					</view>
					<view class="service-content">
						<view class="view">
							{{item.msg}}
						</view>
						<image src="https://admin.cqycgyl.com/uploads/20250917/bcffeaab97a42ccc5968931802b53bf9.png" class="right"></image>
					</view>
				</view>
				<view :id="item.id" class="system" v-if="type=='system'"  @click="handleClick(item)" v-for="(item,index) in list" :key="index">					
					<view class="system-header">
						{{ item.time }}
					</view>
					<view class="system-msg">
						{{item.msg}}
					</view>
				</view>
				
			</view>
			<view class="toBottom" v-if="toBottom">
				<text>没有更多了...</text>
			</view>
			
		</scroll-view>
		

	</view>
</template>

<script>
	export default {

		onLoad(options) {
			this.type = options.type;
			console.log(this.type);
			this.getList();
			
		},
		data() {
			return {
				page: 1,
				type: '',
				list: [],
				toBottom: false,
			}
		},
		onReady() {
			console.log('onReady')
			this.readMsg();
			
		},
		methods: {
			readMsg(e){
				this.$u.api.notice.readMessage({
					id: this.list.map(item=>item.id).join(','),
					type: 'user'
				}).then(res=>{
					this.list.forEach(item=>{
						item.read = true;
					});
				});
			},
			handleClick(item) {
				item.read = true;
				uni.setStorageSync('lifeData', uni.getStorageSync('lifeData'));
				if(item.url&&item.url!=''){
					uni.navigateTo({
						url: item.url
					});
				}
				
			},
			back() {
				uni.navigateBack();
			},
			getList() {
				if(!this.toBottom){
					this.$u.api.notice.getPageIndex({
						page: this.page,
						pageSize: 10,
						type: this.type
					}).then(res=>{
						let data = res.data;
						if(data.length == 0){
							this.toBottom = true;
						}
						this.list.push(...data.map(item=>JSON.parse(item.data))); 
						this.page++;
						
					}).then(()=>{
						this.readMsg();
					});
				}
				
				
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
        >view{
			flex-shrink: 0;
		}
		
		.topzhanwei{
			width: 100vw;
			height: 88rpx;
			background: white;
			
		}
		.navigator{
			width: 100vw;
			height: 88rpx;
			background: white;
			display: flex;
			align-items: center;
			padding: 30rpx;
			justify-content: space-between;
			.title{
				font-weight: 400;
				font-size: 36rpx;
				color: #202020;
			}
		}
		.list{
			width: 100vw;
			flex: 1;
			overflow: hidden;
			height: 100%;

			.list-content{
				width: 100%;
				height: auto;
				padding: 30rpx;
				display:flex;
				flex-direction: column;
				overflow: auto;
				gap: 24rpx;
				>view{
					flex-shrink: 0;
					position: relative;
				}
				>view>.read{
					width: 10rpx;
					height: 10rpx;
					background: #FF0000;
					border-radius: 50%;
					position: absolute;
					top: 0;
					right: -5rpx;
				}
				.empty{
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					
					margin: 180rpx auto;
					image{
						width: 304rpx;
						height: 304rpx;
					}
					.empty-text{
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
					}
					.empty-text{
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
					}
				}
				
				.list-item{
					width: 100%;
					padding:30rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					background: #FFFFFF;
					.order-header{
						display: flex;
						align-items: center;
						gap: 10rpx;
						border-bottom: 1rpx solid #EFEFEF;
						width: 100%;
						padding-bottom: 24rpx;
						.topIcon{
							width: 40rpx;
							height: 40rpx;
						}
						.text{
							font-weight: bold;
							font-size: 28rpx;
							color: #202020;
							margin-left: 16rpx;
						}
						.time{
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
							margin-left: auto;
						}
					}
					.order-content{
						padding-top: 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.view{
							font-weight: 400;
							font-size: 26rpx;
							color: #999999;
							flex: 1;
							overflow: hidden;
							word-break: break-all;
							white-space: pre-wrap;
						}
						.right{
							width: 120rpx;
							height: 120rpx;
							margin-left: auto;
							border-radius: 12rpx 12rpx 12rpx 12rpx;
							overflow: hidden;
							flex-shrink: 0;
						}
					}
				}

				.service{
					width: 100%;
					padding:30rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					background: #FFFFFF;
					.service-header{
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						padding-bottom: 24rpx;
						.left-title{
							font-weight: bold;
							font-size: 28rpx;
							color: #202020;
						}
						.right-date{
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
						}
					}
					.service-content{
						width: 100%;
						display: flex;
						justify-content: space-between;
						.view{
							flex-grow: 1;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							line-height: 48rpx;
							white-space: pre-wrap;
							word-break: break-all;
						}
						.right{
							width: 120rpx;
							height:120rpx;
							flex-shrink: 0;
						}
					}
				}

				.system{
					width: 100%;
					padding:30rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					.system-header{
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						line-height: 48rpx;
						margin-bottom: 24rpx;
						text-align: center;
						width:100%;
					}
					.system-msg{
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						text-align: center;
						width:100%;
						background: #FFFFFF;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						padding-top: 30rpx;
						padding-left: 30rpx;
						padding-right: 30rpx;
						padding-bottom: 30rpx;
						line-height: 48rpx;
					}
				}

				
			}
		}
		.toBottom{
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 24rpx;
			text{
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
		}
		
	}
</style>

</style>
